<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="author" content="@my_programmer">
	<title>css3监听动画完成</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="format-detection" content="telephone=no" />
	<style type="text/css">
		#div {
			width: 60px;
			height: 60px;
			border-radius: 30px;
			background: #eee;
			margin: 100px auto;
			-webkit-transition: all ease 1s;
			-moz-transition: all ease 1s;
			-ms-transition: all ease 1s;
			-o-transition: all ease 1s;
			transition: all ease 1s;
		}
		
		.change {
			-webkit-animation: transform_ani 1s 2 ease;
			-moz-animation: transform_ani 1s 2 ease;
			-ms-animation: transform_ani 1s 2 ease;
			-o-animation: transform_ani 1s 2 ease;
			animation: transform_ani 1s 2 ease;
		}
		
		@-webkit-keyframes transform_ani {
			0% {
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-ms-transform: scale(1);
				-o-transform: scale(1);
				transform: scale(1);
			}
			100% {
				-webkit-transform: scale(2);
				-moz-transform: scale(2);
				-ms-transform: scale(2);
				-o-transform: scale(2);
				transform: scale(2);
			}
		}
		
		@-moz-keyframes transform_ani {
			0% {
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-ms-transform: scale(1);
				-o-transform: scale(1);
				transform: scale(1);
			}
			100% {
				-webkit-transform: scale(2);
				-moz-transform: scale(2);
				-ms-transform: scale(2);
				-o-transform: scale(2);
				transform: scale(2);
			}
		}
		
		@-ms-keyframes transform_ani {
			0% {
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-ms-transform: scale(1);
				-o-transform: scale(1);
				transform: scale(1);
			}
			100% {
				-webkit-transform: scale(2);
				-moz-transform: scale(2);
				-ms-transform: scale(2);
				-o-transform: scale(2);
				transform: scale(2);
			}
		}
		
		@-o-keyframes transform_ani {
			0% {
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-ms-transform: scale(1);
				-o-transform: scale(1);
				transform: scale(1);
			}
			100% {
				-webkit-transform: scale(2);
				-moz-transform: scale(2);
				-ms-transform: scale(2);
				-o-transform: scale(2);
				transform: scale(2);
			}
		}
		
		@keyframes transform_ani {
			0% {
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-ms-transform: scale(1);
				-o-transform: scale(1);
				transform: scale(1);
			}
			100% {
				-webkit-transform: scale(2);
				-moz-transform: scale(2);
				-ms-transform: scale(2);
				-o-transform: scale(2);
				transform: scale(2);
			}
		}
	</style>
</head>

<body>
	<div id="div"></div>
</body>

</html>
<script type="text/javascript">
	var dd = document.querySelector('#div');

	dd.addEventListener("click", clickEvent, false);

	//监听transition动画结束方法  
	dd.addEventListener("webkitTransitionEnd", overTran, false);
	dd.addEventListener("mozTransitionEnd", overTran, false);
	dd.addEventListener("MSTransitionEnd", overTran, false);
	dd.addEventListener("otransitionend", overTran, false);
	dd.addEventListener("transitionend", overTran, false);
	//监听animation动画开始方法  
	dd.addEventListener("webkitAnimationStart", startAni, false);
	dd.addEventListener("mozAnimationStart", startAni, false);
	dd.addEventListener("MSAnimationStart", startAni, false);
	dd.addEventListener("oanimationstart", startAni, false);
	dd.addEventListener("animationstart", startAni, false);
	//监听animation动画结束方法  
	dd.addEventListener("webkitAnimationEnd", overAni, false);
	dd.addEventListener("mozAnimationEnd", overAni, false);
	dd.addEventListener("MSAnimationEnd", overAni, false);
	dd.addEventListener("oanimationend", overAni, false);
	dd.addEventListener("animationend", overAni, false);
	//监听animation重复运动方法  
	dd.addEventListener("webkitAnimationIteration", chongfuAni, false);
	dd.addEventListener("mozAnimationIteration", chongfuAni, false);
	dd.addEventListener("MSAnimationIteration", chongfuAni, false);
	dd.addEventListener("oanimationiteration", chongfuAni, false);
	dd.addEventListener("animationiteration", chongfuAni, false);

	function clickEvent() {
		dd.className = 'change';
		console.log('click');
	}

	function overTran() {
		console.log('TransitionEnd');
	}

	function startAni() {
		console.log('AnimationStart');
	}

	function overAni() {
		dd.className = dd.className.replace('change', ' ');
		console.log('AnimationEnd');
	}

	function chongfuAni() {
		console.log('AnimationIteration');
	}
</script>